<template>
  <div> 
    <div class="div">
      <ul class="ul-a">
        <li class="li-a"><router-link to="/mine"><img src="./项目/知识百科/箭头.png" alt=""></router-link></li>
        <li><router-link to="/mine">知识百科</router-link></li>
      </ul>
      <ul class="ul-b">
        科学宠物知识大百科
      </ul>
    </div>
    <div class="div2">
      <input type="text" placeholder="搜一搜你想了解的宠物知识">
      <img src="https://tse3-mm.cn.bing.net/th/id/OIP-C.gWmKFbzczU0TXDkRdMB1PgHaHa?w=165&h=180&c=7&r=0&o=5&dpr=1.3&pid=1.7" alt="">
    </div>
    <div class="div3">
      <span>官方推荐</span>
      <p>查看更多</p>
      <p class="p1">></p>
    </div>
    <div class="div4">
      <ul>
        <li><img src="./项目/知识百科/图片4.png" alt="">
        <p>行为训练</p>
        <span>训狗需要知道这几点</span>
        </li>
      </ul>
      <ul class="ul-c">
        <li><img src="./项目/知识百科/图片3.png" alt="">
        <p>养猫须知</p>
        <span>猫咪生病有哪些警讯</span>
        </li>
      </ul>
      <ul class="ul-d">
      <li><img src="./项目/知识百科/图片2.png" alt=""></li>
      </ul>
      <ul class="ul-e">
        养狗须知
        <li>关于养狗的知识详情</li>
      </ul>
    </div>
    <div class="div5">
      <img src="./项目/知识百科/头像.png" alt="">
      <ul class="ul-f">{{editor}}</ul>
      <ul class="essay">{{essay}}</ul>
      <ul class="writ">{{writ}}</ul>
      <ul class="dot">{{dot}}</ul>
    </div>
    <div class="div6">
      <ul class="ul-g">
        <li>狗狗总是乱叫为啥</li>
        <li>弄清乱叫原因在解决才有用</li>
      </ul>
      <ul class="ul-h">
      狗狗的警惕性很高，因此周围有异常声响时
      狗狗就会发出叫声来提醒主人，一般声响停
      止后狗狗就不会叫了。
      </ul>
      <div class="div7">
        <img src="./项目/知识百科/图片1.png" alt="">
      </div>
    </div>
    <button class="btn">
      <img src="./项目/知识百科/86441c1ea52c4a52be7718f1136af751.png" alt="">
      <ul>狗狗叫声等&nbsp;收录了该内容</ul>
      <span>></span>
    </button>
  </div>
</template>

<script>

export default {
    name:'IndexKnowledge',
    setup(){
      let editor = '甜宠小编'
      let essay = '文章'
      let writ = '来自网页版'
      let dot = '···'
      return{
        editor,
        essay,
        writ,
        dot
      }
    }
    
}

</script>

<style scoped>
*{
  margin: 0;
  padding: 0;
}
a{
  text-decoration: none;
  color: rgb(90, 89, 89);
}
.div{
  border: 1px solid none;
  height: 8.2rem;
  text-align: center;
  background-color: rgb(185, 187, 223);
}
.div>.ul-a{
  position: relative;
  list-style: none;
}
.div>.ul-a>.li-a{
  position: relative;
  font-size: 2.1875rem;
  top: 1.125rem
}
.div>.ul-a>.li-a img{
  width: 1.25rem;
  height: 1.4rem;
  margin-top: 1rem;
}
.div>.ul-a>li{
  position: relative;
  float: left;
  margin-left:.5125rem;
  top: 1.875rem;
  font-size: 1.25rem;
  color: rgb(90, 89, 89);
}
.div>.ul-b{
  position: absolute;
  left: 2.5rem;
  top: 4.6875rem;
  color: rgb(85, 85, 85);
}
.div2{
  position: relative;
}
.div2>input{
  position: relative;
  width: 19.5rem;
  height: 2.5rem;
  left: 1.875rem;
  border: .0625rem solid gray;
  border-radius: 1.875rem;
  text-indent: 3.75rem;
}
.div2 img{
  position: absolute;
  top: .2875rem;
  width: 1.875rem;
  height: 1.875rem;
  right: 18.875rem;
}
.div3 span{
  position: relative;
  top: 1.25rem;
  right: 4.9375rem;
}
.div3 p{
  position: relative;
  left: 16.375rem;
  float: left;
  top: 1.25rem;
  margin-left: .625rem;
  color: gray;
}
.div3>.p1{
  position: relative;
  font-size: 1.5625rem;
  font-weight:600;
  top: .825rem;
}
.div4>ul{
  /* margin: 1.25rem; */
  list-style: none;
}
.div4>ul>li>img{
  position: relative;
  width: 6rem;
  height: 7.25rem;
  float: left;
  top: 2.5rem;
  right: 5.0375rem;
}
.div4>ul>li>p{
  position: relative;
  right: 10.625rem;
  top: 6.425rem;
  color: white;
  /* margin-top: .625rem; */
}
.div4>ul>li>span{
  position: relative;
  font-size: .625rem;
  font-weight: 100;
  right: 13.95rem;
  top: 8.1875rem;
  zoom: 0.8;
  color: white;
}
.div4>.ul-c{
  list-style: none;
}
.div4>.ul-c>li>img{
  position: relative;
  width: 6rem;
  height: 7.25rem;
  float: left;
  top: .0625rem;
  right: 4.5375rem;
  margin-left: .625rem;
}
.div4>.ul-c>li>p{
 position: relative;
 top: 4.205rem;
   right: 10.225rem;
}
.div4>.ul-c>li>span{
  position: absolute;
  top: 25.5rem;
  right: 11.6975rem;
}
.div4>.ul-d{
  list-style: none;
}
.div4>.ul-d>li>img{
  position: absolute;
  width: 6.2rem;
  height: 7.55rem;
  float: left;
  top: 14.45rem;
  right: 2.25rem;
}
.div4>.ul-e{
  position: relative;
  right: 2.9rem;
  top: 2.7875rem;
  color: white;
  width:25.625rem;
 
}
.div4>.ul-e>li{
  position: relative;
  top: .5rem;
  font-size: .625rem;
  zoom: 0.8;
  right: .5rem; 
}
.div5>img{
  position: relative;
  width: 3.75rem;
  height: 3.75rem;
  right: 18.0625rem;
  top: 4.625rem;
}
.div5>.ul-f{
  position: absolute;
  left: 5.5rem;
  margin-top: 1.25rem;
}
.essay{
  position: relative;
  border: .0625rem solid grey;
  width: 1.875rem;
  font-size: .625rem;
  text-align: center;
  color: grey;
  border-radius: .3125rem;
  left: 5.5125rem;
  top: 2.7rem;
}
.writ{
  position: relative;
  font-size: .625rem;
  text-align: center;
  color: grey;
  zoom: 0.8;
  border-radius: .3125rem;
  left: 9.8125rem;
  top: 2.1rem;
  float: left;
}
.dot{
  position: relative;
  font-size: 2.5rem;
  color: grey;
  left: 17.125rem;
  float: left; 
  bottom: .625rem;
}
.div6 .ul-g {
  position: relative;
  list-style: none;
  top: 3.75rem;
  color: rgba(0, 0, 0, 0.623);
  font-size: .625rem;
  right: 3.125rem;
}
.div6 .ul-h {
  position: relative;
  list-style: none;
  top: 6.75rem;
  color: grey;
  font-size: .625rem;
  zoom: 0.7;
  float: left;
  width: 14.375rem;
  right: 4.5625rem;
}
.div7>img{
  position: relative;
  width: 9.375rem;
  height: 7.5rem;
  bottom: .625rem;
  left: 13.5rem;
}
.btn{
  position: relative;
  border: .0625rem solid rgba(128, 128, 128, 0.737);
  top: 1.875rem;
  height: 2.8rem;
  width: 20.75rem;
  left: 1.25rem;
  background: white;
}
.btn>img{
  position: relative;
  width: 2.5rem;
  top: .525rem;
  right: 8.625rem;
}
.btn>ul{
  position: relative;
  bottom: 1.25rem;
  right: 1.625rem;
  font-size: .9125rem;
  color: gray;
}
.btn>span{
  position: relative;
  bottom: 2.575rem;
  left: 8.75rem;
  font-size: 1.25rem;
  color: gray;
  font-weight: 600;
}
</style>